<template>
  <div class="card">
    <div class="card-title">{{ cardTitle }}</div>
    <div class="card-content">
      <div v-for="content in cardContent" :key="content.id">
        <div>{{ content.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  cardTitle: String,
  cardContent: Array
})
</script>

<style scoped>
.card {
  width: 100%;
  border-radius: 20px;
  background-color: #fff;
  opacity: 0.9;
  margin-bottom: 20px;
  padding: 8px 15px;

}
.card-title {
  font-weight: 700;
  font-size: 20px;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.card-content {
  width: 100%;
  font-size: 14px;
  color: #6f6f6f;
}
</style>